<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>testDemo</title>
</head>

<body>

    <!-- start -->
    <div id="app">
        <aaa></aaa>
    </div>
    <!-- end -->

</body>
<!-- js start -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script type="text/javascript">
    window.onload = () => {
        Vue.config.productionTip = false;

        //第一步: 定义组件（创建组件）
        const vc = Vue.extend({
            // el:'',//不可以写el,因为最终都是为vm实例对象选择的容器服务
            // 模板代码
            template: `
                <div>
                <h1>创建组件的步骤</h1>
                <h3>{{type1}}</h3>
                <h3>{{type2}}</h3>
                <h3>{{type3}}</h3>
                </div>
            `,
            data() {
                return {
                    type1: '1.定义组件',
                    type2: '2.注册组件',
                    type3: '3.使用组件'
                }
            }
        })

        // 创建实例对象
        new Vue({
            el: '#app',
            // 第二步: 注册组件（局部注册）
            components: {
                // aaa是使用时的名字,vc是组件的名字,这两个可以一样比如vc:vc,
                aaa: vc,
            }
        })
    }
</script>

</html>